<!--审核列表-->
<template>
  <div class="container">
    <el-link
      icon="el-icon-arrow-left"
      :underline="false"
      @click="goBack"
      >返回</el-link
    >
    <div class="top-part">
      <div class="title">审核列表</div>
      <!-- <div class="btn-group">
        <el-button>新增企业</el-button>
        <el-button @click="checkDialogVisible = true">发起核查</el-button>
      </div> -->
    </div>
    <div class="content-part">
      <div class="search-form">
        <el-form
          ref="searchForm"
          :model="searchForm"
          inline
          label-position="top"
        >
          <el-form-item class="form-item" prop="unitName" label="企业名称">
            <el-input
              v-model="searchForm.unitName"
              type="text"
              placeholder="请输入企业名称"
            ></el-input>
          </el-form-item>
          <el-form-item
            class="form-item"
            prop="unitOrgCode"
            label="社会统一信用代码"
          >
            <el-input
              v-model="searchForm.unitOrgCode"
              type="text"
              placeholder="请输入社会统一信用代码"
            ></el-input>
          </el-form-item>
          <el-form-item
            class="form-item"
            prop="supportUnitCode"
            label="支撑单位"
          >
            <el-select
              placeholder="请选择支撑单位"
              v-model="searchForm.supportUnitCode"
              style="margin-right: 10px"
            >
              <el-option
                v-for="(it, ind) in supportUnitDict"
                :key="ind"
                :label="it.label"
                :value="it.value"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item class="form-item" prop="checkStatus" label="审核状态">
            <el-select
              placeholder="请选择审核状态"
              v-model="searchForm.checkStatus"
              style="margin-right: 10px"
            >
              <el-option
                v-for="(it, ind) in checkStatusDict"
                :key="ind"
                :label="it.label"
                :value="it.value"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <div class="form-btn">
          <el-button type="text" @click="resetForm">重置</el-button>
          <el-button @click="search" style="margin-left: 36px">搜索</el-button>
        </div>
      </div>
      <div class="table">
        <el-table :data="dataList">
          <el-table-column
            align="center"
            prop="unitName"
            label="企业名称"
            min-width="200"
          >
            <!-- <template slot-scope="{row}">
              <span class="underline" @click="gotoDetail">{{row.a}}</span>
            </template>-->
          </el-table-column>
          <!-- <el-table-column align="center" prop="b" label="更新类型" min-width="160"></el-table-column> -->
          <el-table-column
            align="center"
            prop="supportUnitCode"
            label="支撑单位"
            min-width="180"
          >
            <template slot-scope="{ row }">
              <span>{{
                supportUnitDict.find((it) => it.value == row.supportUnitCode) ? supportUnitDict.find((it) => it.value == row.supportUnitCode).label : ''
              }}</span>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            prop="commitTime"
            label="提交时间"
            sortable
            min-width="100"
          ></el-table-column>
          <el-table-column
            align="center"
            prop="commitUser"
            label="提交人"
            min-width="120"
          ></el-table-column>
          <el-table-column
            align="center"
            prop="confirmTime"
            label="审核时间"
            sortable
            min-width="100"
          ></el-table-column>
          <el-table-column
            align="center"
            prop="confirmUser"
            label="审核人"
            min-width="180"
          ></el-table-column>
          <el-table-column
            align="center"
            prop="confirmStatus"
            label="审核状态"
            sortable
            min-width="180"
          >
            <template slot-scope="{ row }">
              <span>{{
                confirmStatusDict.find((it) => it.value == row.confirmStatus) ? confirmStatusDict.find((it) => it.value == row.confirmStatus).label : ''
              }}</span>
            </template>
          </el-table-column>
          <el-table-column fixed="right" label="操作" width="50">
            <template slot-scope="{ row }">
              <el-button
                type="text"
                size="small"
                :disabled="row.confirmStatus !== 1"
                @click="gotoCheckEdit(row)"
                >审核</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <div class="page">
          <el-pagination
            layout="prev,slot, next"
            :total="total"
            @current-change="currentChange"
          >
            <!-- <el-button type="text" class="prev" disabled>上一页</el-button> -->
            <span class="current">{{ pageNum }}</span>
            <span class="total">
              /{{
                total % pageSize == 0
                  ? total / pageSize
                  : Math.ceil(total / pageSize)
              }}
            </span>
            <!-- <el-button type="text" class="next">下一页</el-button> -->
          </el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { listModifyTaskInfo } from '@/api/enterprise'
export default {
  data() {
    return {
      searchForm: {
        unitName: '',
        unitOrgCode: '',
        supportUnitCode: '',
        checkStatus: ''
      },
      dataList: [
        {
          a: '上海百万投资管理有限公司',
          d: false,
          e: true,
          f: false,
          g: ['交互式', '有孔', '备案'],
          h: '超过5小时'
        }
      ],
      total: 0,
      pageNum: 1,
      pageSize: 10
    }
  },
  computed: {
    supportUnitDict() {
      const dict = this.$store.getters.dict
      const list = []
      for (let value in dict.supportUnit) {
        list.push({
          label: dict.supportUnit[value],
          value
        })
      }
      return list
    },
    checkStatusDict() {
      const dict = this.$store.getters.dict
      const list = []
      for (let value in dict.checkStatus) {
        list.push({
          label: dict.checkStatus[value],
          value
        })
      }
      return list
    },
    confirmStatusDict() {
      const dict = this.$store.getters.dict
      const list = []
      for (let value in dict.confirmStatus) {
        list.push({
          label: dict.confirmStatus[value],
          value
        })
      }
      return list
    }
  },
  mounted() {
    this.search()
  },
  methods: {
    resetForm() {
      this.searchForm = {
        unitName: '',
        unitOrgCode: '',
        supportUnitCode: '',
        checkStatus: ''
      }
    },
    search() {
      this.pageNum = 1
      this.getList()
    },
    getList() {
      listModifyTaskInfo({
        ...this.searchForm,
        pageNum: this.pageNum,
        pageSize: this.pageSize
      }).then((res) => {
        this.dataList = res.data.list
        this.total = res.data.total
      })
    },
    currentChange(page) {
      this.pageNum = page
      this.getList()
    },
    gotoCheckEdit(row) {
      this.$router.push({
        path: `/check/edit?id=${row.id}&enterpriseId=${row.enterpriseId}&unitOrgCode=${row.unitOrgCode}`
      })
    },
    gotoDetail() {
      this.$router.push({
        path: '/enterprise/detail'
      })
    },
    goBack() {
      // this.$router.go(-1)
      window.close();
    }
  }
}
</script>

<style lang="scss" scoped>
.container {
  padding: 48px 108px;
  .top-part {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 10px 0 20px;
    .title {
      font-size: 26px;
    }
  }
  .content-part {
    background: #1c4088;
    border-radius: 8px 8px 8px 8px;
    .search-form {
      display: flex;
      justify-content: space-between;
      padding: 20px;
      .form-item {
        width: 190px;
        margin-bottom: 0;
        border-left: 1px solid rgba(255, 255, 255, 0.3);
        &:first-child {
          border: none;
        }
      }
      .form-btn {
        height: 72px;
        display: flex;
        align-items: center;
        margin-bottom: 0;
        .el-button--text {
          font-size: 16px;
          color: rgba(255, 255, 255, 0.6);
        }
        .el-button--default {
          width: 80px;
          height: 40px;
          background: #000822;
          border-radius: 4px 4px 4px 4px;
          font-size: 16px;
          color: #ffffff;
          border: none;
        }
      }
      ::v-deep .el-form-item {
        .el-form-item__label {
          color: #ffffff;
          padding: 0 15px;
        }
        .el-input__inner {
          background: #1c4088;
          border: none;
          color: #ffffff;
        }
      }
    }
    .table {
      background: #ffffff;
      box-shadow: 0px 4px 64px 32px rgba(0, 0, 0, 0.05);
      border-radius: 8px 8px 8px 8px;
      .underline {
        cursor: pointer;
        color: #e70012;
        border-bottom: 1px solid #e70012;
        &.tag {
          color: #606266;
          border-bottom: 1px solid rgba(0, 8, 34, 0.6);
          &:not(:last-child) {
            margin-right: 10px;
          }
        }
      }
      .actived {
        color: #e70012;
      }

      .page {
        margin-top: 20px;
        text-align: center;
        color: #000822;
        font-size: 14px;
        span {
          min-width: auto;
        }
        .current {
          color: #1c4088;
          font-size: 16px;
        }
        .prev {
          color: rgba(0, 8, 34, 0.6);
          margin-right: 40px;
        }
        .next {
          color: rgba(0, 8, 34, 0.6);
          margin-left: 40px;
        }
        // ::v-deep {
        //   .el-pagination .btn-prev {
        //     padding-right: 0;
        //   }
        //   .el-pagination .btn-next {
        //     padding-left: 0;
        //   }
        // }
      }
    }
  }
}
</style>